<template>
  <div style="padding:20px 250px">
    <div id="line"></div>
  </div>
</template>

<script>
import * as G2 from "@antv/g2";
export default {
  components: {},
  data() {
    return {};
  },
  methods: {
    initCharts() {

      const data = [
        { month: "2020年01月", 'service': '服务费待收金额', 'temperature':200 },
        { month: "2020年01月", 'service': '服务费应收金额', 'temperature':300 },
        { month: "2020年01月", 'service': '服务费已收金额', 'temperature':400 },
        { month: "2020年02月", 'service': '服务费待收金额', 'temperature':400 },
        { month: "2020年02月", 'service': '服务费应收金额', 'temperature':500 },
        { month: "2020年02月", 'service': '服务费已收金额', 'temperature':100 },
        { month: "2020年03月", 'service': '服务费待收金额', 'temperature':300 },
        { month: "2020年03月", 'service': '服务费应收金额', 'temperature':700 },
        { month: "2020年03月", 'service': '服务费已收金额', 'temperature':800 },
        { month: "2020年04月", 'service': '服务费待收金额', 'temperature':500 },
        { month: "2020年04月", 'service': '服务费应收金额', 'temperature':900 },
        { month: "2020年04月", 'service': '服务费已收金额', 'temperature':300 },
        { month: "2020年05月", 'service': '服务费待收金额', 'temperature':600 },
        { month: "2020年05月", 'service': '服务费应收金额', 'temperature':900 },
        { month: "2020年05月", 'service': '服务费已收金额', 'temperature':100 },
        { month: "2020年06月", 'service': '服务费待收金额', 'temperature':200 },
        { month: "2020年06月", 'service': '服务费应收金额', 'temperature':300 },
        { month: "2020年06月", 'service': '服务费已收金额', 'temperature':400 },
        { month: "2020年07月", 'service': '服务费待收金额', 'temperature':400 },
        { month: "2020年07月", 'service': '服务费应收金额', 'temperature':500 },
        { month: "2020年07月", 'service': '服务费已收金额', 'temperature':100 },
        { month: "2020年08月", 'service': '服务费待收金额', 'temperature':300 },
        { month: "2020年08月", 'service': '服务费应收金额', 'temperature':700 },
        { month: "2020年08月", 'service': '服务费已收金额', 'temperature':800 },
        { month: "2020年09月", 'service': '服务费待收金额', 'temperature':500 },
        { month: "2020年09月", 'service': '服务费应收金额', 'temperature':900 },
        { month: "2020年09月", 'service': '服务费已收金额', 'temperature':300 },
        { month: "2020年10月", 'service': '服务费待收金额', 'temperature':600 },
        { month: "2020年10月", 'service': '服务费应收金额', 'temperature':900 },
        { month: "2020年10月", 'service': '服务费已收金额', 'temperature':100 },
        { month: "2020年11月", 'service': '服务费待收金额', 'temperature':200 },
        { month: "2020年11月", 'service': '服务费应收金额', 'temperature':300 },
        { month: "2020年11月", 'service': '服务费已收金额', 'temperature':400 },
        { month: "2020年12月", 'service': '服务费待收金额', 'temperature':400 },
        { month: "2020年12月", 'service': '服务费应收金额', 'temperature':500 },
        { month: "2020年12月", 'service': '服务费已收金额', 'temperature':100 },
      ];

      const chart = new G2.Chart({
        container: "line",
        autoFit: true,
        height: 500,
      });

      chart.data(data);
      chart.scale({
        month: {
          range: [0, 1],
        },
        'temperature': {
          nice: true,
        },
      });
      chart.legend({
        custom: true,
        position:'top-right',
        items: [
          {
            value: "服务费待收金额",
            name: "服务费待收金额",
            marker: { symbol: "circle", style: { fill: "#FACC17", r: 5 } },
          },
          {
            value: "服务费应收金额",
            name: "服务费应收金额",
            marker: {
              symbol: "circle",
              style: { fill: "#1890FF", r: 5 },
            },
          },
          {
            value: "服务费已收金额",
            name: "服务费已收金额",
            marker: {
              symbol: "circle",
              style: { fill: "#2FC25B", r: 5 },
            },
          },
        ],
      })
      chart.tooltip({
        showCrosshairs: true,
        shared: true,
      });

      chart.axis("temperature", {
        label: {
          formatter: (val) => {
            return val + " k";
          },
        },
      });

      chart
        .line()
        .position("month*temperature")
        .color("service",v => {
          if(v==='服务费待收金额') return '#FACC17'
          else if (v==='服务费应收金额') return '#1890FF'
          else if (v==='服务费已收金额') return '#2FC25B'
        })
        .shape("line");

      chart
        .point()
        .position("month*temperature")
        .color("service",v => {
          if(v==='服务费待收金额') return '#FACC17'
          else if (v==='服务费应收金额') return '#1890FF'
          else if (v==='服务费已收金额') return '#2FC25B'
        })
        .shape("circle");

      chart.render();
    },
  },
  mounted() {
    this.initCharts();
  },
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
